<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>家长端 - 对话沟通</title>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Helvetica Neue', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      background-color: #f8f9fa;
    }

    .nav {
      background-color: #007bff;
      color: white;
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .nav a {
      color: white;
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    .nav a:hover {
      background-color: rgba(255,255,255,0.2);
    }

    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 15px;
    }

    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      padding: 20px;
    }

    /* 聊天主容器 */
    .chat-container {
      display: flex;
      height: 600px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    /* 左侧边栏 */
    .sidebar {
      width: 30%;
      min-width: 280px;
      background-color: #f9fafb;
      border-right: 1px solid #e9ecef;
      display: flex;
      flex-direction: column;
    }

    /* 搜索框 */
    .search-box {
      padding: 15px;
      border-bottom: 1px solid #e9ecef;
    }

    .search-input {
      width: 100%;
      padding: 10px 15px;
      border: none;
      border-radius: 20px;
      background-color: #e9ecef;
      font-size: 14px;
      outline: none;
    }

    .search-input::placeholder {
      color: #999;
    }

    /* 联系人列表 */
    .contacts {
      flex: 1;
      overflow-y: auto;
    }

    .contact-item {
      display: flex;
      align-items: center;
      padding: 15px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .contact-item:hover {
      background-color: #e9ecef;
    }

    .contact-item.active {
      background-color: #e9f5ff;
    }

    .contact-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: #007bff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      margin-right: 15px;
      overflow: hidden;
    }

    .contact-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contact-info {
      flex: 1;
      min-width: 0;
    }

    .contact-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .contact-subject {
      font-size: 13px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 联系人操作栏 */
    .contact-actions {
      padding: 15px;
      border-top: 1px solid #e9ecef;
      display: flex;
      justify-content: space-between;
    }

    .action-btn {
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .action-btn:hover {
      background-color: #0069d9;
    }

    /* 右侧聊天区域 */
    .chat-area {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* 聊天头部 */
    .chat-header {
      padding: 15px;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      align-items: center;
      background-color: white;
    }

    .back-btn {
      display: none;
      margin-right: 15px;
      cursor: pointer;
    }

    .current-contact-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #007bff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
    }

    .current-contact-name {
      font-size: 18px;
      font-weight: 500;
    }

    /* 聊天消息区域 */
    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      background-color: #f8f9fa;
      display: flex;
      flex-direction: column;
    }

    .message {
      max-width: 70%;
      margin-bottom: 15px;
      display: flex;
    }

    .message.sent {
      align-self: flex-end;
    }

    .message.received {
      align-self: flex-start;
    }

    .message-content {
      padding: 10px 15px;
      border-radius: 20px;
      position: relative;
    }

    .message.sent .message-content {
      background-color: #007bff;
      color: white;
      border-bottom-right-radius: 0;
    }

    .message.received .message-content {
      background-color: white;
      color: #333;
      border-bottom-left-radius: 0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .message-time {
      font-size: 11px;
      color: #999;
      margin-top: 5px;
      text-align: right;
    }

    /* 输入区域 */
    .input-area {
      padding: 15px;
      border-top: 1px solid #e9ecef;
      background-color: white;
    }

    .message-input {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #e9ecef;
      border-radius: 25px;
      font-size: 14px;
      outline: none;
      resize: none;
      max-height: 100px;
    }

    .input-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }

    .attach-btn, .send-btn {
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .attach-btn {
      background-color: #e9ecef;
      color: #666;
    }

    .attach-btn:hover {
      background-color: #dcdcdc;
    }

    .send-btn:hover {
      background-color: #0069d9;
    }

    /* 添加联系人模态框 */
    .modal {
      display: none;
      position: fixed;
      z-index: 100;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
      animation: fadeIn 0.3s;
    }

    .modal-content {
      background-color: white;
      margin: 15% auto;
      padding: 20px;
      border-radius: 8px;
      width: 90%;
      max-width: 400px;
      animation: slideUp 0.3s;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 500;
    }

    .close-btn {
      font-size: 24px;
      font-weight: bold;
      color: #666;
      cursor: pointer;
    }

    .close-btn:hover {
      color: #333;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
      color: #666;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      font-size: 14px;
      outline: none;
    }

    .btn {
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      background-color: #007bff;
      color: white;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .btn:hover {
      background-color: #0069d9;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .sidebar {
        width: 100%;
        display: none;
      }

      .sidebar.active {
        display: flex;
      }

      .chat-area {
        display: none;
      }

      .chat-area.active {
        display: flex;
        width: 100%;
      }

      .back-btn {
        display: block;
      }
    }

    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideUp {
      from { transform: translateY(50px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .message {
      opacity: 0;
      transform: translateY(10px);
      animation: messageAppear 0.3s forwards;
    }

    @keyframes messageAppear {
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
<div class="nav">
  <a href="view_letter.html">查看信件</a>
  <a href="chat.html">对话沟通</a>
  <a href="more_features.html">更多功能</a>
  <a href="../index.html">退出登录</a>
</div>

<div class="container">
  <h3>对话沟通</h3>

  <div class="card">
    <div class="chat-container">
      <!-- 左侧边栏：联系人列表 -->
      <div class="sidebar" id="sidebar">
        <div class="search-box">
          <input type="text" class="search-input" placeholder="搜索联系人...">
        </div>

        <div class="contacts">
          <div class="contact-item active" data-contact="李老师">
            <div class="contact-avatar">李</div>
            <div class="contact-info">
              <div class="contact-name">李老师</div>
              <div class="contact-subject">数学老师</div>
            </div>
          </div>

          <div class="contact-item" data-contact="王老师">
            <div class="contact-avatar">王</div>
            <div class="contact-info">
              <div class="contact-name">王老师</div>
              <div class="contact-subject">语文老师</div>
            </div>
          </div>

          <div class="contact-item" data-contact="张老师">
            <div class="contact-avatar">张</div>
            <div class="contact-info">
              <div class="contact-name">张老师</div>
              <div class="contact-subject">英语老师</div>
            </div>
          </div>

          <div class="contact-item" data-contact="刘老师">
            <div class="contact-avatar">刘</div>
            <div class="contact-info">
              <div class="contact-name">刘老师</div>
              <div class="contact-subject">物理老师</div>
            </div>
          </div>

          <div class="contact-item" data-contact="陈老师">
            <div class="contact-avatar">陈</div>
            <div class="contact-info">
              <div class="contact-name">陈老师</div>
              <div class="contact-subject">化学老师</div>
            </div>
          </div>
        </div>

        <div class="contact-actions">
          <button class="action-btn" title="添加联系人" id="addContactBtn">
            <i class="fa fa-plus"></i>
          </button>
          <button class="action-btn" title="联系人分组">
            <i class="fa fa-folder"></i>
          </button>
          <button class="action-btn" title="联系人设置">
            <i class="fa fa-cog"></i>
          </button>
        </div>
      </div>

      <!-- 右侧聊天区域 -->
      <div class="chat-area active" id="chatArea">
        <div class="chat-header">
          <div class="back-btn" id="backBtn">
            <i class="fa fa-arrow-left"></i>
          </div>
          <div class="current-contact-avatar">李</div>
          <div class="current-contact-name" id="currentContactName">李老师</div>
        </div>

        <div class="messages" id="messages">
          <div class="message received" style="animation-delay: 0.1s;">
            <div class="message-content">
              <p>家长您好，您的孩子最近在学校表现不错，特别是数学成绩有明显提高。</p>
              <div class="message-time">昨天 10:30</div>
            </div>
          </div>

          <div class="message sent" style="animation-delay: 0.3s;">
            <div class="message-content">
              <p>谢谢老师的关心！孩子回家也说很喜欢您的教学方式。</p>
              <div class="message-time">昨天 11:15</div>
            </div>
          </div>

          <div class="message received" style="animation-delay: 0.5s;">
            <div class="message-content">
              <p>不过最近他在英语阅读方面有些薄弱，建议在家多阅读一些英文文章。</p>
              <div class="message-time">昨天 14:20</div>
            </div>
          </div>
        </div>

        <div class="input-area">
          <textarea class="message-input" id="messageInput" placeholder="输入消息..." rows="1"></textarea>
          <div class="input-actions">
            <button class="attach-btn">
              <i class="fa fa-paperclip"></i>
            </button>
            <button class="send-btn" id="sendBtn">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 添加联系人模态框 -->
<div class="modal" id="addContactModal">
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">添加联系人</div>
      <div class="close-btn" id="closeModalBtn">&times;</div>
    </div>

    <form id="addContactForm">
      <div class="form-group">
        <label for="contactName">姓名</label>
        <input type="text" id="contactName" placeholder="请输入老师姓名" required>
      </div>

      <div class="form-group">
        <label for="contactSubject">科目</label>
        <input type="text" id="contactSubject" placeholder="请输入教授科目" required>
      </div>

      <div class="form-group">
        <label for="contactPhone">联系电话</label>
        <input type="tel" id="contactPhone" placeholder="请输入联系电话">
      </div>

      <button type="submit" class="btn">添加</button>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 模拟数据
    const contacts = [
      { name: '李老师', subject: '数学老师', avatar: '李' },
      { name: '王老师', subject: '语文老师', avatar: '王' },
      { name: '张老师', subject: '英语老师', avatar: '张' },
      { name: '刘老师', subject: '物理老师', avatar: '刘' },
      { name: '陈老师', subject: '化学老师', avatar: '陈' }
    ];

    const chatHistory = {
      '李老师': [
        { sender: 'teacher', content: '家长您好，您的孩子最近在学校表现不错，特别是数学成绩有明显提高。', time: '昨天 10:30' },
        { sender: 'parent', content: '谢谢老师的关心！孩子回家也说很喜欢您的教学方式。', time: '昨天 11:15' },
        { sender: 'teacher', content: '不过最近他在英语阅读方面有些薄弱，建议在家多阅读一些英文文章。', time: '昨天 14:20' }
      ],
      '王老师': [
        { sender: 'teacher', content: '最近孩子的作文进步很大，继续保持！', time: '前天 09:45' },
        { sender: 'parent', content: '感谢老师的指导！我们在家也会鼓励他多阅读。', time: '前天 11:00' },
        { sender: 'teacher', content: '下周将有一场作文比赛，已为他报名参加。', time: '前天 15:20' }
      ],
      '张老师': [
        { sender: 'teacher', content: '下周将进行英语听力测试，请提醒孩子做好准备。', time: '2025-06-27 15:30' },
        { sender: 'parent', content: '好的，我们会督促他练习听力。', time: '2025-06-27 16:10' },
        { sender: 'teacher', content: '可以让孩子每天听15分钟英语新闻，对听力提高很有帮助。', time: '2025-06-28 09:20' }
      ],
      '刘老师': [
        { sender: 'teacher', content: '物理实验课上，孩子的动手能力很强。', time: '2025-06-26 14:10' },
        { sender: 'parent', content: '谢谢老师的夸奖！他在家也经常做一些小实验。', time: '2025-06-26 16:30' }
      ],
      '陈老师': [
        { sender: 'teacher', content: '化学期中考试将于下周五进行。', time: '2025-06-25 10:00' },
        { sender: 'parent', content: '好的，我们会帮助他复习。', time: '2025-06-25 11:20' }
      ]
    };

    let currentContact = '李老师';
    const messageInput = document.getElementById('messageInput');
    const messagesContainer = document.getElementById('messages');
    const sendBtn = document.getElementById('sendBtn');
    const sidebar = document.getElementById('sidebar');
    const chatArea = document.getElementById('chatArea');
    const backBtn = document.getElementById('backBtn');
    const addContactBtn = document.getElementById('addContactBtn');
    const addContactModal = document.getElementById('addContactModal');
    const closeModalBtn = document.getElementById('closeModalBtn');
    const addContactForm = document.getElementById('addContactForm');
    const currentContactName = document.getElementById('currentContactName');

    // 初始化联系人列表
    function initContacts() {
      const contactsContainer = document.querySelector('.contacts');
      contactsContainer.innerHTML = '';

      contacts.forEach(contact => {
        const contactItem = document.createElement('div');
        contactItem.className = `contact-item ${contact.name === currentContact ? 'active' : ''}`;
        contactItem.dataset.contact = contact.name;

        contactItem.innerHTML = `
                        <div class="contact-avatar">${contact.avatar}</div>
                        <div class="contact-info">
                            <div class="contact-name">${contact.name}</div>
                            <div class="contact-subject">${contact.subject}</div>
                        </div>
                    `;

        contactItem.addEventListener('click', () => {
          selectContact(contact.name);
        });

        contactsContainer.appendChild(contactItem);
      });
    }

    // 选择联系人
    function selectContact(contactName) {
      // 移除所有选中状态
      document.querySelectorAll('.contact-item').forEach(item => {
        item.classList.remove('active');
      });

      // 添加当前选中状态
      const contactItem = document.querySelector(`.contact-item[data-contact="${contactName}"]`);
      if (contactItem) {
        contactItem.classList.add('active');
      }

      // 更新当前联系人
      currentContact = contactName;
      currentContactName.textContent = contactName;

      // 更新当前联系人头像
      const avatar = contacts.find(c => c.name === contactName)?.avatar || contactName.charAt(0);
      document.querySelector('.current-contact-avatar').textContent = avatar;

      // 加载聊天历史
      loadChatHistory(contactName);

      // 在移动设备上切换到聊天区域
      if (window.innerWidth < 768) {
        sidebar.classList.remove('active');
        chatArea.classList.add('active');
      }
    }

    // 加载聊天历史
    function loadChatHistory(contactName) {
      messagesContainer.innerHTML = '';

      if (chatHistory[contactName]) {
        chatHistory[contactName].forEach(msg => {
          addMessageToUI(msg.sender === 'teacher' ? 'received' : 'sent', msg.content, msg.time);
        });
      }

      // 滚动到底部
      scrollToBottom();
    }

    // 添加消息到UI
    function addMessageToUI(type, content, time) {
      const messageDiv = document.createElement('div');
      messageDiv.className = `message ${type}`;

      const delay = 0.1 * (document.querySelectorAll('.message').length + 1);
      messageDiv.style.animationDelay = `${delay}s`;

      messageDiv.innerHTML = `
                    <div class="message-content">
                        <p>${content}</p>
                        <div class="message-time">${time}</div>
                    </div>
                `;

      messagesContainer.appendChild(messageDiv);

      // 触发动画
      setTimeout(() => {
        messageDiv.style.opacity = '1';
        messageDiv.style.transform = 'translateY(0)';
      }, 10);
    }

    // 发送消息
    function sendMessage() {
      const content = messageInput.value.trim();
      if (!content) return;

      // 获取当前时间
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const time = `${hours}:${minutes}`;

      // 添加自己的消息
      addMessageToUI('sent', content, time);

      // 添加到聊天历史
      if (!chatHistory[currentContact]) {
        chatHistory[currentContact] = [];
      }
      chatHistory[currentContact].push({
        sender: 'parent',
        content,
        time
      });

      // 清空输入框
      messageInput.value = '';
      messageInput.style.height = 'auto';

      // 滚动到底部
      scrollToBottom();

      // 模拟回复
      setTimeout(() => {
        let reply = '';
        const teacherSubject = contacts.find(c => c.name === currentContact)?.subject || '';

        if (content.includes('谢谢') || content.includes('感谢')) {
          reply = '不客气，这是我应该做的。';
        } else if (content.includes('成绩') || content.includes('分数')) {
          reply = '孩子的成绩在班级中处于中上水平，继续努力！';
        } else if (content.includes('作业') || content.includes('练习')) {
          reply = '作业已经布置在班级群里了，请查看一下。';
        } else if (teacherSubject.includes('数学')) {
          reply = '数学学习需要多做练习，遇到问题随时问我。';
        } else if (teacherSubject.includes('语文')) {
          reply = '阅读和写作是语文学习的关键，建议每天坚持阅读。';
        } else if (teacherSubject.includes('英语')) {
          reply = '英语学习需要多听多说，可以每天听一篇英语短文。';
        } else {
          reply = '收到，我会在课堂上多关注他的。';
        }

        addMessageToUI('received', reply, time);

        // 添加到聊天历史
        chatHistory[currentContact].push({
          sender: 'teacher',
          content: reply,
          time
        });

        // 滚动到底部
        scrollToBottom();
      }, 1000 + Math.random() * 1000);
    }

    // 滚动到底部
    function scrollToBottom() {
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    // 调整输入框高度
    function adjustTextareaHeight() {
      messageInput.style.height = 'auto';
      messageInput.style.height = (messageInput.scrollHeight) + 'px';
    }

    // 移动端侧边栏切换
    function toggleSidebar() {
      if (window.innerWidth < 768) {
        sidebar.classList.toggle('active');
        chatArea.classList.toggle('active');
      }
    }

    // 显示添加联系人模态框
    function showAddContactModal() {
      addContactModal.style.display = 'block';
    }

    // 隐藏添加联系人模态框
    function hideAddContactModal() {
      addContactModal.style.display = 'none';
    }

    // 添加新联系人
    function addContact(name, subject, phone = '') {
      // 检查是否已存在该联系人
      if (contacts.some(c => c.name === name)) {
        alert('该联系人已存在！');
        return;
      }

      // 添加新联系人
      contacts.push({
        name,
        subject,
        avatar: name.charAt(0),
        phone
      });

      // 初始化联系人列表
      initContacts();

      // 选择新添加的联系人
      selectContact(name);

      // 隐藏模态框
      hideAddContactModal();

      // 显示成功提示
      alert('联系人添加成功！');
    }

    // 事件监听
    sendBtn.addEventListener('click', sendMessage);

    messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
      }
    });

    messageInput.addEventListener('input', adjustTextareaHeight);

    backBtn.addEventListener('click', toggleSidebar);

    addContactBtn.addEventListener('click', showAddContactModal);

    closeModalBtn.addEventListener('click', hideAddContactModal);

    addContactModal.addEventListener('click', (e) => {
      if (e.target === addContactModal) {
        hideAddContactModal();
      }
    });

    addContactForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('contactName').value.trim();
      const subject = document.getElementById('contactSubject').value.trim();
      const phone = document.getElementById('contactPhone').value.trim();

      if (name && subject) {
        addContact(name, subject, phone);

        // 重置表单
        addContactForm.reset();
      }
    });

    // 初始化
    initContacts();
    loadChatHistory(currentContact);

    // 调整窗口大小时处理移动端视图
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 768) {
        sidebar.classList.remove('active');
        chatArea.classList.add('active');
      }
    });
  });
</script>
</body>
</html>
